<template>
  <div>
    <div class="inOne-advice">
      <el-button type="primary" icon="edit" @click="handleAdd()"
        >新增</el-button
      >
    </div>
    <!-- 列表 -->
    <div class="inOne-table">
      <el-table
        :data="appointmentInfo[0].medicine"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column
          align="center"
          prop="dragName"
          label="名称(规格)"
          width="150"
        >
        </el-table-column>
        <el-table-column align="center" prop="days" label="天数" width="100">
        </el-table-column>
        <el-table-column align="center" prop="number" label="数量" width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="price"
          label="单价(元)"
          width="100"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--新增界面-->
    <div>
      <el-dialog
        title="表单新增"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      >
        <el-form
          label-position="left"
          label-width="90px"
          style="width: 400px; margin-left: 50px"
          :model="addform"
          :rules="addFormRules"
          ref="addform"
        >
          <el-form-item label="名称(规格)" prop="dragName">
            <el-input v-model="addform.dragName"></el-input>
          </el-form-item>
          <el-form-item label="天数" prop="days">
            <el-input-number
              :min="1"
              :max="58"
              v-model="addform.days"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="数量" prop="number">
            <el-input-number
              :min="1"
              :max="200"
              v-model="addform.number"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="单价(元)" prop="price">
            <el-input-number :min="1" v-model="addform.price"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSubmit()">确定</el-button>
          <el-button type="primary" @click="handleReset()">重置</el-button>
          <el-button @click="addCancel()">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!--编辑界面-->
    <div>
      <el-dialog
        title="表单编辑"
        :visible.sync="dialogEditVisible"
        :close-on-click-modal="false"
      >
        <el-form
          label-position="left"
          label-width="90px"
          style="width: 400px; margin-left: 50px"
          :model="editform"
          :rules="addFormRules"
          ref="editform"
        >
          <el-form-item label="名称(规格)" prop="dragName">
            <el-input v-model="editform.dragName"></el-input>
          </el-form-item>
          <el-form-item label="天数" prop="days">
            <el-input-number
              :min="1"
              :max="58"
              v-model="editform.days"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="数量" prop="number">
            <el-input-number
              :min="1"
              :max="200"
              v-model="editform.number"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="单价(元)" prop="price">
            <el-input-number
              :min="1"
              v-model="editform.price"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSubmit()">确定</el-button>
          <el-button @click="editCancel()">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      value: "",
      input: "",
      dialogFormVisible: false,
      dialogEditVisible: false,
      //新增界面数据
      addform: {
        dragName: "",
        days: null,
        number: null,
        price: null,
        isactive:true
      },
      addFormRules: {
        dragName: [
          { required: true, message: "请输入名称(规格)", trigger: "blur" },
        ],
      },
      editform: {
        dragName: "",
        days: null,
        number: null,
        price: null,
        isactive:true
      },
      editIndex: null,
      multipleSelection: [],
      len: null,
      searchTxt: "",
    };
  },
  mounted() {},
  computed: {
    ...mapState({
      appointmentInfo: (state) => state.appointment.appointmentInfo,
    }),
  },
  methods: {
    //删除
    handleDelete(index, row) {
      this.$confirm("确认删除吗？", "提示", {})
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.$store.commit('DELETE_MEDICINE',index)
          this.$store.commit('DELETE_INDENT',index+1)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //勾选的数据列表
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      this.len = this.multipleSelection.length;
    },
    //新增界面显示
    handleAdd() {
      this.dialogFormVisible = true;
      //再次新增时，初始化
      this.addform = {
        dragName: "",
        days: null,
        number: null,
        price: null,
        isactive:true
      };
    },
    //新增界面里的确定提交按钮
    handleSubmit() {
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {})
            .then(() => {
              this.$message({
                type: "success",
                message: "提交成功",
              });
                console.log(this.addform);
              this.$store.commit("ADD_MEDICINE", this.addform);
              this.$store.commit("ADD_INDENT", this.addform);
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.$message.error("提交失败");
              this.$refs.addform.resetFields();
            });
        }
      });
    },
    //新增界面里的取消按钮
    addCancel() {
      this.dialogFormVisible = false;
    },
    //新增界面里的重置按钮
    handleReset() {
      this.$refs.addform.resetFields();
    },
    //编辑界面显示
    handleEdit(index, row) {
      this.dialogEditVisible = true;
      // this.editform = row;                  //浅度拷贝 指向同一地址
      this.editform = Object.assign({}, row); //深度拷贝，两个对象对应不同的地址
      this.editIndex = index;
    },
    //编辑界面里的确定提交按钮
    editSubmit() {
      this.$refs.editform.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {})
            .then(() => {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.$store.commit("CHANGE_MEDICINE",{index:this.editIndex,medicine: this.editform})
              this.$store.commit("CHANGE_INDENT",{index:this.editIndex+1,medicine: this.editform})
            //   this.tableData[this.editIndex] = this.editform;
              this.dialogEditVisible = false;
            })
            .catch(() => {});
        }
      });
    },
    //编辑界面里的取消按钮
    editCancel() {
      this.dialogEditVisible = false;
    },
  },
};
</script>


<style lang='less' rel='stylesheet/less' scoped>
.inOne-Bottom {
  margin-top: 20px;
}
.toolbarBottom {
  padding: 0 !important;
}
</style>